<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>仓库报表-拣选统计</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <!--<link rel="shortcut icon" type="image/x-icon" href="/static/favicon.ico" />-->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="styles/app.css">
</head>
<body>
     <div class="container" style="height:100%;width:100%">
        <div id="title" class="row">
            拣选统计
        </div>
        <div class="row" style="height:90vh;width:100%">
            <div id="main" class="col-md-12" style="height:100%"></div>
        </div>
    </div>
    <script type="text/javascript" src="scripts/libs/zepto/zepto.min.js"></script>
    <script type="text/javascript" src="scripts/libs/echarts/echarts.min.js"></script>
    <script type="text/javascript">
        var warehouseChart = echarts.init(document.getElementById("main"), 'iscs');
        var option = {
            tooltip: {
                trigger: 'axis'
            },
            toolbox: {
                feature: {
                    dataView: {
                        show: true,
                        readOnly: false
                    },
                    magicType: {
                        show: true,
                        type: ['line', 'bar']
                    },
                    restore: {
                        show: true
                    },
                    saveAsImage: {
                        show: true
                    }
                }
            },
            legend: {
                data: ['拣选箱数', '拣选件数']
            },
            xAxis: [{
                type: 'category',
                data: [],
                axisLabel: {
                    //rotate: 45, //刻度旋转45度角
                    interval: 0,
                    formatter: function(val) {
                        return val.split("").join("\n");
                        //return val;
                    }
                }
            }],
            yAxis: [{
                type: 'value',
                scale: true,
                name: '拣选箱数',
                max: 'dataMax',
                min: 0
            }, {
                type: 'value',
                scale: true,
                name: '拣选件数',
                max: 'dataMax',
                min: 0
            }],
            series: [{
                    name: '拣选箱数',
                    type: 'bar',
                    yAxisIndex: 0,
                    data: []
                }, {
                    name: '拣选件数',
                    type: 'bar',
                    yAxisIndex: 1,
                    data: []
                }
                //, {
                //     name: '库位数',
                //     type: 'bar',
                //     data: []
                // }
            ]
        };

        var getReportData = function() {
            //warehouseChart.showLoading();
            $.ajax({
                url: 'http://192.168.200.138:8001/DmCamara.asmx/GetPickingUserJson',
                type: 'get',
                dataType: 'json',
                success: function(data) {
                    // warehouseChart.hideLoading();
                    var userNameArray = []; //拣选员数组
                    var packageCountArray = []; //拣选包裹数组
                    var pickingQtyArray = []; //拣选件数数组
                    //var stLocationNumArray = []; //库位数数组
                    data.Table.forEach(function(item) {
                        userNameArray.push(item.USER_NAME);
                        packageCountArray.push(item.PACKAGECOUNT);
                        pickingQtyArray.push(item.PICKINGQTY);
                        //stLocationNumArray.push(item.ST_LOCATION_NUM);
                    });

                    option.xAxis[0].data = userNameArray;
                    option.series[0].data = packageCountArray;
                    option.series[1].data = pickingQtyArray;
                    // option.series[2].data = stLocationNumArray;

                    warehouseChart.setOption(option);
                }
            });
        }
        getReportData();
   
        setInterval(getReportData, 1000 * 60 * 2); //定时刷新
    </script>  
</body>

</html>